<template>
  <div class="container">
    <div class="map" id="container" style="width: 100%;height: 80vh"></div>
  </div>
</template>

<script>
import AMap from 'AMap'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      map: null,
      marker: null,
      arriveCoor: [114.59737, 36.656333],
      arrive: '' // 位置信息
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.initMap(this.arriveCoor)
    this.mapCoor(this.arriveCoor)
    this.getLocation()
  },
  methods: {
    initMap (arriveCoor) {
      this.map = new AMap.Map('container', {
        center: arriveCoor, // 初始化地图中心点
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 15
      })
      this.addMarker(arriveCoor)
    },
    // 实例化点标记
    addMarker (arriveCoor) {
      this.marker = new AMap.Marker({
        icon: '', // 图片ip
        imageSize: '20px',
        position: arriveCoor,
        offset: new AMap.Pixel(-13, -30),
        // 设置点标记是否可以拖拽
        draggable: false,
        cursor: 'move',
        // 设置拖拽效果
        raiseOnDrag: true
      })
      this.marker.setMap(this.map)
    },
    // 查询坐标
    mapCoor (lnglatXY) {
      var _this = this
      AMap.service('AMap.Geocoder', () => {
        var geocoder = new AMap.Geocoder({})
        geocoder.getAddress(lnglatXY, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            _this.arrive = result.regeocode.formattedAddress
          } else {
            _this.arrive = '暂无位置'
          }
        })
      })
    },
    // 获取当前定位
    getLocation () {
      const that = this
      this.map = new AMap.Map('container', {
        center: this.arriveCoor,
        resizeEnable: true,
        zoom: 15
      })
      // this.$toast.loading({
      //   message: '定位中...', // 提示文本
      //   forbidClick: true, // 禁止背景点击
      //   position: top,
      //   duration: 0 // 展示时长ms 值为0时 toast不会消失
      // })
      AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：5s
          buttonPosition: 'RB', // 定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
        })
        geolocation.getCurrentPosition(function (status, result) {
          if (status === 'complete') {
            that.onComplete(result)
          } else {
            that.onError(result)
          }
        })
      })
    },
    // 解析定位结果
    onComplete (data) {
      console.log('定位', data)
      // this.signAddress = data.formattedAddress
      // console.log(data.position.lng, data.position.lat)
      this.arriveCoor = [data.position.lng, data.position.lat]
      this.initMap(this.arriveCoor)
      // this.$toast.success({
      //   message: '定位成功',
      //   position: top
      // })
      // this.signIn.position = data.formattedAddress
      // this.signIn.position = data.addressComponent.country + data.addressComponent.province + data.addressComponent.city + data.addressComponent.district

      // const yy = new Date().getFullYear()
      // const mm = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      // const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      // const hh = new Date().getHours()
      // const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      // const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      // var gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
      // // console.log(gettime)
      // this.signIn.time = gettime
      // this.signIn.time_stamp = new Date().getTime()
      // this.signIn.status = 1
      // this.disabled = false
    },
    // 解析定位错误信息
    onError (data) {
      console.log('定位失败:' + data.message)
      // this.$toast.fail({
      //   message: '定位失败',
      //   position: top
      // })
    }
  }
}
</script>

<style scoped lang="">

</style>
